<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>工位列表</title>
  <!-- 引入 Element UI 的样式 -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
  <link rel="stylesheet" href="../../assets/css/element-ui.css" />
  <link rel="stylesheet" href="../../assets/css/styles.css" />
  <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
</head>
<body>
<div id="app">
  <!-- <div class="header">
    <div class="container header-content">
      <div class="logo">订单管理系统</div>
      <div style="position: absolute; left: 50%;">
        <el-button type="primary" size="large" @click="openMenu('../../index.html')">
          首页
        </el-button>
        <el-dropdown size="large" @command="openMenu">
          <el-button type="primary" size="large">
            业务中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in businessCenters" :command="item.path">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-info" v-if="currentUser.name">
        欢迎，{{ currentUser.name }}
        <el-button type="primary" size="mini" @click="exit(2)">登出</el-button>
      </div>
    </div>
  </div> -->
  <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
  <div class=" main-content">
    <div class="content" style="width: 100%">

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
        </el-col>
      </el-row>

      <div class="center-grid mb-20">
        <el-table v-loading="loading" :data="tableData">
          <el-table-column v-for="(item, index) in tableColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
            <template slot-scope="scope">
              <template> {{ scope.row[item.fieldApi] }} </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" :resizable="false" :show-overflow-tooltip="false" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text"  @click="detailView(scope.row)">详情</el-button>
              <el-button size="mini" type="text"  @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text"  @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            v-show="total>0"
            :total="total"
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            @current-change="getList"
        />
      </div>
    </div>
  </div>

  <!-- 添加或修改对话框 -->
  <el-dialog :title="title" :visible.sync="open" :fullscreen="true" width="800px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="工位编号" prop="stationCode">
        <el-input v-model="form.stationCode" placeholder="请输入工位编号" />
      </el-form-item>
      <el-form-item label="工位名称" prop="stationName">
        <el-input v-model="form.stationName" placeholder="请输入工位名称" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</div>
<script src="../../assets/js/constant.js"></script>
<script src="../../assets/js/utils.js"></script>
<script src="../../assets/js/auth.js"></script>
<script src="../../assets/js/axios.min.js"></script>
<!-- 引入 Vue.js -->
<!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script> -->
<script src="../../assets/js/vue.js"></script>
<!-- 引入 Element UI 的 JS 文件 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script src="../../assets/js/element-ui.js"></script>

<script type="module">
  import LxHeader from '../../pages/components/LxHeader/index.js'
        Vue.component('lx-header', LxHeader)
    checkAuthentication(2)
    new Vue({
        el: '#app',
        components: {},
        data() {
           return {
                currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                businessCenters: [
                    { name: '订单中心', path: '../index.html' },
                    { name: '用户中心', path: '#' },
                    { name: '产品中心', path: '#' },
                    { name: '库存中心', path: '#' },
                    { name: '财务中心', path: '#' },
                    { name: '数据中心', path: '#' },
                    { name: '系统中心', path: '#' },
                    { name: '消息中心', path: '#' }
                ],
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    puCode: '',
                    puName: ''
                },
                total: 0,
                tableData: [],
                tableColumnData: [
                    {
                        fieldName: '工位编号',
                        fieldApi: 'stationCode'
                    },
                    {
                        fieldName: '工位名称',
                        fieldApi: 'stationName'
                    }
                ],
                // 遮罩层
                loading: true,
                // 选中数组
                stationCodes: [],
                optionsObj:[],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                request_host: request_host,
                pageSizes: pageSizes,
                multipleSelection: []
            }
        },
        created() {
            this.init()
        },
        methods: {
            exit,
            init() {
                this.getList()
            },
            getList() {
                this.loading = true
                try {
                    axios.get(`${this.request_host}/system/station/list`,{ params: this.queryParams }).then((response) => {
                        if (response.status == 200) {
                            this.tableData = response.data.rows
                            this.total = response.data.total
                            this.loading = false
                        }
                    })
                } catch (error) {
                    console.error('请求失败:', error)
                }
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.title.includes('添加')) {
                            // 新增
                            axios.post(`${this.request_host}/system/station`, this.form)
                                .then(response => {
                                    if (response.data.code == 200){
                                        this.$message.success("提交成功")
                                        this.cancel();
                                        this.getList()
                                        const params = `stationCode=`+response.data.data;
                                        const url = `station_item.html?${params}`;
                                        window.open(url, '_blank');
                                    }else {
                                        this.$message.error(response.data.msg)
                                    }

                                })
                        } else {
                            //修改提交
                            axios.put(`${this.request_host}/system/station`, this.form)
                                .then(response => {
                                    if (response.data.code == 200){
                                        this.$message.success("提交成功")
                                        this.cancel();
                                        this.getList();
                                    }else {
                                        this.$message.error(response.data.msg)
                                    }

                                })
                            console.log(this.form)
                            const params = `stationCode=`+this.form.stationCode;
                            const url = `station_item.html?${params}`;
                            window.open(url, '_blank');
                        }

                    }
                })
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.form = {}
            },
            handleQuery() {
                this.getList()
            },
            resetQuery() {
                this.queryParams = {
                    pageNo: 1,
                    pageSize: 10,
                    puCode: '',
                    puName: ''
                }
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.resetQuery()
                this.open = true
                this.title = "添加工位"
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.resetQuery()
                const stationCode = row.stationCode || this.stationCodes[0]
                // 这里替换为实际的API调用
                axios.get(`${this.request_host}/system/station/` + stationCode)
                    .then(response => {
                        this.form = response.data.data
                        this.open = true
                        this.title = "修改工位"
                    });

            },
            // 分页数量切换
            handleSizeChange(val) {
                this.$set(this.queryParams, 'pageSize', val)
                this.getData()
            },
            // 当前页码切换
            handleCurrentChange(val) {
                this.$set(this.queryParams, 'pageNo', val)
                this.getData()
            },
            detailView(row) {
                const stationCode = row.stationCode;
                const params = `stationCode=${encodeURIComponent(stationCode)}`;
                const url = `station_item.html?${params}`;
                window.open(url, '_blank');
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const stationName = row.stationName
                const stationCodes = row.stationCode
                this.$confirm('是否确认删除工位名称为"' + stationName + '"的数据项？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    // 这里替换为实际的API调用
                    return axios.delete(`${this.request_host}/system/station/` + stationCodes)
                }).then(() => {
                    this.getList()
                    this.$message.success("删除成功")
                })
            },
            openMenu(url) {
                window.open(url)
            },
        }
    })
</script>
<style>
    .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
    }
    .mb8 {
        margin-bottom: 10px;
    }
</style>
</body>
</html>
